<!-- 用户编辑模态框 -->
<style>
    .chinaContent {
        width: 100%;
        padding: 20px;
    }

    .data-list ul {
        list-style: none;
        zoom: 1;
        padding-left: 0px;
    }

    .data-list ul li {
        list-style-type: none;
        float: left;
        border: 1px solid #CFCFCF;
        background-color: #CFCFCF;
        color: #FFFFFF;
        padding: 10px;
        width: 150px;
        margin-right: 10px;
        margin-top: 10px;
        text-align: center;
    }

    .data-list ul li.selected {
        background-color: #dd4b39;
        color: #FFFFFF;
    }

    .data-list ul li.selected:hover {
        background-color: #c64e3b;
        color: #FFFFFF;
    }

    .data-list ul li:hover {
        background-color: #cacaca;
        color: #FFFFFF;
    }
</style>
<div class="chinaContent" id="chinaContent">
    <div class="data-list">
    <ul>
    <#list allChina as city>
    <li data_value="${city.id}" data_name="${city.name}">${city.name}
    </li>
    </#list>
    <div style="clear: both;"></div>
    </ul>
    </div>
</div>
<script type="text/javascript">


    $(document).ready(function () {
        $("#chinaContent li").each(function(){
            var id = $("#dataAuthor").val();
            if(id!=null && id!=""){
                if(id == $(this).attr("data_value")){
                    $(this).addClass("selected");
                }
            }
        });
        $("#chinaContent li").on("click", function () {
            $(this).addClass("selected");
            $(this).siblings().removeClass("selected");
            dataAuthorId = $(this).attr("data_value");
            dataAuthorStr = $(this).attr("data_name");
        });
    });
</script>
